<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片懒加载</title>
</head>
<style>
  img {
    width: 100%;
    height: 600px;
  }
</style>

<body>
  <div id="example"></div>
  <img src="../../assets/img/offsetImg.png" alt="">
  <!-- <div class="container">
    <img src="../../assets/img/03.jpg"  data-src="../../assets/img/03.jpg">
    <img src="../../assets/img/01.jpeg"  data-src="../../assets/img/01.jpeg">
    <img src="../../assets/img/bear.png"  data-src="../../assets/img/bear.png">
    <img src="../../assets/img/bg1.png"  data-src="../../assets/img/01.jpg">
  </div> -->
  <h2>方案2 getBoundingClientRect 获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置</h2>
  <div>
    <img
      src="https://cdn.pixabay.com/photo/2021/08/24/15/38/sand-6570980_960_720.jpg"
      alt="1"
    />
    <img
      src="https://cdn.pixabay.com/photo/2013/02/21/19/06/drink-84533_960_720.jpg"
      alt="2"
    />
    <img
      data-src="https://cdn.pixabay.com/photo/2014/12/15/17/16/boardwalk-569314_960_720.jpg"
      alt="3"
    />
    <img
      data-src="https://cdn.pixabay.com/photo/2013/07/18/20/26/sea-164989_960_720.jpg"
      alt="4"
    />
    <img
      data-src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"
      alt="5"
    />
    <img
      data-src="https://cdn.pixabay.com/photo/2017/03/26/21/54/yoga-2176668_960_720.jpg"
      alt="6"
    />
    <img
      data-src="https://cdn.pixabay.com/photo/2015/03/17/14/05/sparkler-677774_960_720.jpg"
      alt="7"
    />
  </div>

<!-- 知识点：
（1）window.innerHeight 是浏览器可视区的高度
（2）document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的距离
（3）imgs.offsetTop 是元素顶部距离文档顶部的高度（包括滚动条的距离）
（4）图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop; -->
<!-- <script>
  var imgs = document.querySelectorAll('img');
  function lozyLoad() {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var winHeight= window.innerHeight;
    console.log("浏览器可视区的高度", winHeight,"浏览器滚动的距离",scrollTop)
    for(var i=0;i < imgs.length;i++){
      if(imgs[i].offsetTop < scrollTop + winHeight ){
        console.log("元素顶部距离文档顶部的高度" + i , imgs[i].offsetTop)
        imgs[i].src = imgs[i].getAttribute('data-src');
      }
    }
  }
  // window.onscroll = lozyLoad(); 这里直接调用了，不能这样用
  window.onscroll = lozyLoad;
</script> -->


<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.js"></script>
<script>
  const images = document.querySelectorAll("img");
  const lazyLoad = () => {
    images.forEach((item) => {
      // clientHeight 元素的高度 height+padding
      // 触发条件为img元素的CSSOM对象到视口顶部的距离 < 100px + 视口高度，+100px为了提前触发图片加载
      if (item.getBoundingClientRect().top < document.documentElement.clientHeight + 100) {
        if ("src" in item.dataset) {
          item.src = item.dataset.src;
        }
      }
    });
  };
  document.addEventListener("scroll", _.throttle(lazyLoad, 200));
</script>

<script>
  // IntersectionObserver 实现懒加载 Chrome 51+ 
  let io = new IntersectionObserver(callback, options);
  // 开始观察
  io.observe(document.getElementById('example'));
  
</script>
</body>
</html>
<!-- B站面试视频 -->
<!-- https://www.bilibili.com/video/BV1V34y1B7Br/?spm_id_from=333.788 -->